<template>
	<view class="uni-tab-bar">
	
	<scroll-view class="uni-swiper-tab" scroll-x>
		<view @tap="tap(index)" :style="swiperstly" v-for="(tab,index) in tabBars":key="tab.id" class="swiper-tab-list" :id="tab.id" :class="tabIndex==index ? 'uni-tab-item-title-active':''">
			
			<view >
				{{tab.name}}  {{tab.num?tab.num:''}}
			</view>
			
			<view :style="bottomstly"  :class="tabIndex==index?'tab-bottom-border':''" >
				
			</view>
		</view>
		
	</scroll-view>
		</view>
</template>

<script>
	export default{
			props:{
				tabBars:Array,
				tabIndex:Number,
				swiperstly:{
					type:String,
					default:''
				},
				bottomstly:{
					type:String,
					default:''
				}
			},
		methods:{
			//切换tab
			tap(index){
				
			this.$emit('tapTab',index)
			}
		}
	}
</script>

<style>
	.uni-tab-item-title-active{
		color: #333333;
		font-weight: bold;
		
	}
	.tab-bottom-border{
		margin-left: 30upx;
		border-radius: 20upx;
		background-color: #FDDD32;
		border-bottom: #FDDD32 1upx solid;
		height: 10upx;
		width: 90upx;
	}
	.uni-swiper-tab{
		border-bottom: #FFFFFF 1upx solid;
	}
		
</style>
